<template>
  <header class="m-header">
    <!-- logo -->
    <div class="am-fl tpl-header-logo">
      <router-link to="/index" tag="a">
        <img src="../../assets/logo.svg" alt="">
      </router-link>
    </div>
    <!-- 右侧内容 -->
    <div class="tpl-header-fluid">
      <!-- 侧边切换 -->
      <div class="am-fl tpl-header-switch-button am-icon-list" @click="autoLeftNav">
                    <span>

                </span>
      </div>

      <!-- 其它功能-->
      <div class="am-fr tpl-header-navbar">
        <ul>
          <!-- 欢迎语 -->
          <li class="am-text-sm ">
            <img v-if="avatarUrl" class="am-circle" :src="avatarUrl" alt="" style="width: 38px;height: 38px ;margin-top: -8px;border: 1px solid #7ce6eb">
            <svg v-else class="icon" aria-hidden="true" style="font-size: 38px;vertical-align: -0.32em;">
              <use xlink:href="#icon-avatar-in-pie"></use>
            </svg>
          </li>
          <li class="am-text-sm tpl-header-navbar-welcome">
            <a href="javascript:;">欢迎你, <span>{{name}}</span> </a>
          </li>

          <!-- 新邮件 -->
          <!--<li class="am-dropdown tpl-dropdown" data-am-dropdown="">
            <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle="">
              <i class="am-icon-envelope"></i>
              <span class="am-badge am-badge-success am-round item-feed-badge">4</span>
            </a>
            &lt;!&ndash; 弹出列表 &ndash;&gt;
            <ul class="am-dropdown-content tpl-dropdown-content">
              <li class="tpl-dropdown-menu-messages">
                <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                  <div class="menu-messages-ico">
                    <img src="../../assets/img/user04.png" alt="">
                  </div>
                  <div class="menu-messages-time">
                    3小时前
                  </div>
                  <div class="menu-messages-content">
                    <div class="menu-messages-content-title">
                      <i class="am-icon-circle-o am-text-success"></i>
                      <span>夕风色</span>
                    </div>
                    <div class="am-text-truncate"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze UI 的成长，则离不开用户的支持。
                    </div>
                    <div class="menu-messages-content-time">2016-09-21 下午 16:40</div>
                  </div>
                </a>
              </li>

              <li class="tpl-dropdown-menu-messages">
                <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                  <div class="menu-messages-ico">
                    <img src="../../assets/img/user02.png" alt="">
                  </div>
                  <div class="menu-messages-time">
                    5天前
                  </div>
                  <div class="menu-messages-content">
                    <div class="menu-messages-content-title">
                      <i class="am-icon-circle-o am-text-warning"></i>
                      <span>禁言小张</span>
                    </div>
                    <div class="am-text-truncate"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。</div>
                    <div class="menu-messages-content-time">2016-09-16 上午 09:23</div>
                  </div>
                </a>
              </li>
              <li class="tpl-dropdown-menu-messages">
                <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                  <i class="am-icon-circle-o"></i> 进入列表…
                </a>
              </li>
            </ul>
          </li>-->

          <!-- 新提示 -->
          <!--<li class="am-dropdown" data-am-dropdown="">
            <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle="">
              <i class="am-icon-bell"></i>
              <span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
            </a>

            &lt;!&ndash; 弹出列表 &ndash;&gt;
            <ul class="am-dropdown-content tpl-dropdown-content">
              <li class="tpl-dropdown-menu-notifications">
                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                  <div class="tpl-dropdown-menu-notifications-title">
                    <i class="am-icon-line-chart"></i>
                    <span> 有6笔新的销售订单</span>
                  </div>
                  <div class="tpl-dropdown-menu-notifications-time">
                    12分钟前
                  </div>
                </a>
              </li>
              <li class="tpl-dropdown-menu-notifications">
                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                  <div class="tpl-dropdown-menu-notifications-title">
                    <i class="am-icon-star"></i>
                    <span> 有3个来自人事部的消息</span>
                  </div>
                  <div class="tpl-dropdown-menu-notifications-time">
                    30分钟前
                  </div>
                </a>
              </li>
              <li class="tpl-dropdown-menu-notifications">
                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                  <div class="tpl-dropdown-menu-notifications-title">
                    <i class="am-icon-folder-o"></i>
                    <span> 上午开会记录存档</span>
                  </div>
                  <div class="tpl-dropdown-menu-notifications-time">
                    1天前
                  </div>
                </a>
              </li>


              <li class="tpl-dropdown-menu-notifications">
                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf" >
                  <i class="am-icon-bell"></i> 进入列表…
                </a>
              </li>
            </ul>
          </li>-->

          <!-- 退出 -->
          <li class="am-text-sm">
            <a href="javascript:;" @click="$router.push('/main/sys/user/profile')">
              <span class="am-icon-pencil"></span>
              账号设置
            </a>
          </li>
          <li class="am-text-sm">
            <a href="javascript:;" @click="signOut">
              <span class="am-icon-sign-out"></span>
              退出
            </a>
          </li>
        </ul>
      </div>
    </div>

  </header>
</template>

<script>

import storage from '../../lib/storage'

export default {
  name: 'main-header',
  data:function(){
    var userInfo = storage.getCurrentUserInfo()
    return {
    	name:userInfo.realName,
      avatarUrl: userInfo.avatarUrl || ''
    }
  },
  created:function(){
    this.$root.$on('userInfoChange',function(userInfo){
      this.name = userInfo.realName
      this.avatarUrl = userInfo.avatarUrl
    })
  },
  mounted:function(){
    //this.autoLeftNav()
  },
  methods:{
   autoLeftNav:function() {
     if ($('.left-sidebar').is('.active')) {
       if ($(window).width() > 1024) {
         $('.tpl-content-wrapper').removeClass('active');
       }
       $('.left-sidebar').removeClass('active');
     } else {

       $('.left-sidebar').addClass('active');
       if ($(window).width() > 1024) {
         $('.tpl-content-wrapper').addClass('active');
       }
     }
   },
   signOut:function(){
      storage.setLogin(null)
     storage.setAccessToken(null)
      this.$router.push('/login')
   }

  }
}

</script>

<style lang="less" scoped>
  .m-header {
    .tpl-header-logo {
      height: 60px;
      img {
        width: 132px;
        height: 48px;
      }
    }
    .tpl-header-switch-button {
      cursor: pointer;
    }
    .tpl-header-fluid {
      background: linear-gradient(to right, #009fd7 , #01c8c1);
      height: 60px;
      line-height: 60px;
      padding-right: 5px;

      .tpl-header-switch-button {
        background: #7fcfeb;
        color: #fff;
        font-size: 28px;
        line-height: 59px;
        border-right: 1px solid #e9ecf3;
        border-left: 1px solid #eee;
      }
      .ie10 {
        .tpl-header-switch-button{
          line-height: 57px;
        }
      }

      .tpl-header-navbar{
        a {
          color: #fff;
          padding: 0 23px;
        }
      }
    }
  }
</style>
